<template>
  <div class="nav-bar">
    <div class="nav-bar-content" :style="NavBarContentStyle">
      <div class="left" @click="handleLeft">
        <icon-svg v-if="leftArrow" class="back" icon-class="arrow" />
        <span class="text">{{leftText}}</span>
      </div>

      <!--<transition name="slide-top">
        <div class="title" v-if="!showTitle2">{{title}}</div>
      </transition>
      <transition name="slide-bottom">
        <div class="title" v-if="showTitle2">{{title2}}</div>
      </transition>-->
      <transition name="slide">
        <div class="title" key="title1" v-if="!showTitle2">{{title}}</div>
        <div class="title2" key="title2" v-else>{{title2}}</div>
      </transition>

      <div class="right" @click="handleRight">{{rightText}}</div>
    </div>

    <div class="nav-bar-height" v-if="fixed && placeholder" />
  </div>
</template>

<script>
export default {
  name: 'nav-bar',
  props: {
    title: {
      type: String,
      default: ''
    },
    title2: {
      type: String,
      default: ''
    },
    showTitle2: {
      type: Boolean,
      default: false
    },
    leftText: {
      type: String,
      default: ''
    },
    rightText: {
      type: String,
      default: ''
    },
    leftArrow: {
      type: Boolean,
      default: false
    },
    fixed: {
      type: Boolean,
      default: false
    },
    placeholder: { //  固定在顶部时，是否在标签位置生成一个等高的占位元素
      type: Boolean,
      default: false
    },
    background: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: ''
    },
    transparent: { //  背景色透明
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleLeft () {
      this.$router.back()
    },
    handleRight (e) {
      this.$emit('right-click', e)
    }
  },
  computed: {
    NavBarContentStyle () {
      return {
        background: this.background,
        color: this.color,
        paddingTop: this.$store.state.StatusBarHeight + 'px',
        position: this.fixed ? 'fixed' : ''
      }
    }
  }
}
</script>

<style scoped lang="less">
  @import "~common/style/mixins.less";
  @import "~common/style/variable.less";

  .nav-bar {
    position: relative;
    color: @color-text;
    text-align: center;
    z-index: 100;
    .nav-bar-content {
      width: 100%;
      padding-top: @status-bar-height;
      position: relative;
      height: @nav-bar-height;
      line-height: @nav-bar-height;
      display: flex;
      align-items: center;
      color: @color-text;
      background: @color-background;
      font-size: @font-size-medium;
      transition: all .3s;
      .left, .right {
        position: absolute;
        padding: 0 7px;
        z-index: 110;
      }
      .left { left: 0 }
      .right { right: 0 }
      .left .back {
        color: @color-theme;
        font-size: @font-size-medium-x;
        transform: rotate(90deg);
      }
      .title, .title2 {
        padding: 0 20%;
        position: absolute;
        top: @status-bar-height;
        bottom: 0;
        left: 0;
        right: 0;
        font-weight: bold;
        font-size: @font-size-medium-x;
        z-index: 109;
        .no-wrap();
      }
    }
  }
  .nav-bar-height { height: calc(@nav-bar-height + @status-bar-height) }

  .slide-enter-active, .slide-leave-active {
    transition: all .3s;
  }
  .slide-enter, .slide-leave-to {
    opacity: 0;
  }
  .title.slide-enter, .title.slide-leave-to {
    transform: translateY(-100%);
  }
  .title2.slide-enter, .title2.slide-leave-to {
    transform: translateY(100%);
  }
</style>
